import React from 'react';
import styles from './index.less';
import { Card, Tabs } from 'antd';
import BaseComponent from '@/components/BaseComponent';
import styled from 'styled-components';
import { connect } from 'dva';
import DataReportingTutorialView from '@/pages/ManCenter/TrainingTutorial/DataReportingTutorialView';
import EndoscopicDiagnosisView from '@/pages/ManCenter/TrainingTutorial/EndoscopicDiagnosisView';

const { TabPane } = Tabs;

const TabContent = styled.div`
  margin-top: 16px;
`;

/**
 * 常见问题
 */
@connect(({ trainingtutorial, loading }) => ({
  isLoading: loading.effects['trainingtutorial/getAllDatas'],
}))
class TrainingTutorial extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      activityKey: '1',
      // 数据上报教程数据源
      dataReportingTutorialDatas: [
        {
          id: 1,
          title: '数据上报教程',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 2,
          title: '安教管培训教程2022年3月11日',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 3,
          title: '安效省培训教桯2022年3月18日',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 4,
          title: '安欲省培训教程2022年3月25日',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 5,
          title: '安敏省培训教程2022年4月1日',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 6,
          title: '安敏省培训教程2022年4月1日',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 7,
          title: '安效省培训教程2022年4月8日',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 8,
          title: '安效省培训教程2022年4月15日',
          content: '下载地址:https://www.baidu.com',
        },
      ],
      // 内镜诊断
      endoscopicDiagnosisData: [
        {
          id: 1,
          title: '下载地址',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 2,
          title: '下载地址',
          content: '下载地址:https://www.baidu.com',
        },
        {
          id: 3,
          title: '下载地址',
          content: '下载地址:https://www.baidu.com',
        },
      ],
    };
  }

  componentDidMount() {
    // this.getListPageData();
  }

  /**
   * 获取所有数据
   */
  getListPageData = () => {
    this.execHttp('trainingtutorial/getAllDatas', {
      message: '',
    }).then(resp => {
      const { success, data } = resp;
      if (success) {
        const { dataReportingTutorialDatas, endoscopicDiagnosisData } = data;
        this.setState({
          dataReportingTutorialDatas,
          endoscopicDiagnosisData,
        });
      }
    });
  };

  render() {
    return (
      <div className={styles.trainingTutorial}>
        <Card bordered={true}>
          <div>
            <Tabs
              animated={false}
              activeKey={this.state.activityKey}
              onChange={this.handleTabChange}
            >
              <TabPane tab="数据上报教程" key="1"></TabPane>
              <TabPane tab="内镜诊断小程序使用教程" key="2"></TabPane>
            </Tabs>
          </div>
          {/*数据上报教程*/}
          {this.state.activityKey == '1' ? (
            <TabContent>
              <DataReportingTutorialView
                datas={this.state.dataReportingTutorialDatas}
              ></DataReportingTutorialView>
            </TabContent>
          ) : null}
          {/*内镜诊断小程序使用教程*/}
          {this.state.activityKey == '2' ? (
            <TabContent>
              <TabContent>
                <EndoscopicDiagnosisView
                  datas={this.state.endoscopicDiagnosisData}
                ></EndoscopicDiagnosisView>
              </TabContent>
            </TabContent>
          ) : null}
        </Card>
      </div>
    );
  }

  /**
   * tab切换
   * @param key
   */
  handleTabChange = key => {
    this.setState({
      activityKey: key,
    });
  };
}

export default TrainingTutorial;
